<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <script>
        // 自定义事件

        // // 把事件函数 统一管理
        // document.querySelector('button').addEventListener('click', function () {
        //     console.log('fn');
        // })

        // let eventObj = {};

        // function addEvent(eventName, callback) {
        //     // 把多个事件名称,和多个事件函数保存起来

        //     // 第一次绑定,把事件名初始化为一个数组
        //     if (typeof eventObj[eventName] === 'undefined') {
        //         eventObj[eventName] = []
        //     }
        //     // 保存事件
        //     eventObj[eventName].push(callback);
        // }
        // addEvent('myevent', function () {
        //     console.log('好耶');
        // })
        // addEvent('myevent', function () {
        //     console.log('坏耶');
        // })
        // console.log(eventObj);

        // // 手写一个触发函数
        // function trigger(eventName) {
        //     if (typeof eventObj[eventName] != 'undefined') {
        //         eventObj[eventName].forEach(item => item())
        //     } else {
        //         throw Error('参数错误')
        //     }
        // }
        // trigger('myevent')
        // trigger('error')

        // ——————————————————————————
        // 封装成类
        class MyEvent {
            constructor() {
                this.eventObj = {};
            }
            // 添加事件
            addEvent(eventName, callback) {
                if (typeof this.eventObj[eventName] === 'undefined') {
                    this.eventObj[eventName] = []
                }
                this.eventObj[eventName].push(callback);
            }
            // 触发函数
            trigger(eventName) {
                if (typeof this.eventObj[eventName] != 'undefined') {
                    this.eventObj[eventName].forEach(item => item())
                } else {
                    throw Error('参数错误')
                }
            }
        }

        // 调用类
        let myevent = new MyEvent();
        myevent.addEvent("myevent",function(){
            console.log(1111);
        })

        myevent.addEvent("myevent",function(){
            console.log(2222);
        })


        setTimeout(() => {
            myevent.trigger("myevent"); 
        }, 2000);

    </script>
</body>

</html>